import {View,Text,StyleSheet,TextInput,Image, TouchableOpacity,Switch} from 'react-native';
import {Component} from 'react';
import React from 'react';
import { AntDesign } from '@expo/vector-icons';
import { Entypo } from '@expo/vector-icons';
import { Ionicons } from '@expo/vector-icons';
import { MaterialIcons } from '@expo/vector-icons';
import { Feather } from '@expo/vector-icons';
import DialogModal from './DialogModal';
import WhoModal from './WhoModal';
import RemindModal from './RemindModal';
import './global';

export default class Speak extends Component{

    state={
        value: false,
        disabled: false,
        changeTxt:'切换Switch',
    }
    constructor(props){
        super(props);
        this.state ={
            isShowDialog: false,
            isShowWho:false,
            isShowRemind:false,
        };
        this.ensureDialog = this.ensureDialog.bind(this);
        this.cancelDialog = this.cancelDialog.bind(this);

    }

    render(){
        return(
            <View>
                <View style={styles.header}>
                    <TouchableOpacity style={styles.btn} onPress={()=> this.props.navigation.navigate('Community')}>
                        <AntDesign name="close" size={p2d(45)} color="white" style={styles.black} />    
                    </TouchableOpacity>
    
                    
                    <Text style={styles.fabiao}>发表话题</Text>
    
                    <Feather name="more-vertical" size={p2d(50)} color="white" style={styles.more}/>
                </View>
                <TextInput 
                    placeholder="请输入标题"
                    blurOnSubmit={false}
                    style={styles.title}>
                </TextInput>
                <TextInput 
                    placeholder="这一刻你想表达的..."
                    blurOnSubmit={false}
                    multiline={true}
                    textAlignVertical="top"
                    style={styles.context}>
                </TextInput>
    
                <Feather name="smile" size={p2d(40)} color="black" style={styles.smile}/>
                <AntDesign name="link" size={p2d(40)} color="black" style={styles.link}/>
                <Image 
                    resizeMode='cover'
                    source={require('../assets/photo.png')}
                    style={styles.photo}/>
                
                <TouchableOpacity style={styles.location}>
                    <Entypo name="location-pin" size={p2d(35)} style={styles.loca} color="black" />
                    <Text style={styles.fontlocation}>所在地</Text>
                </TouchableOpacity>

                <View>
                    <DialogModal
                        content='分类'
                        confirm={this.ensureDialog}
                        cancel={this.cancelDialog}
                        visible={this.state.isShowDialog}/>
                    <View>
                        <TouchableOpacity style={styles.box} onPress={() => {this.setState({isShowDialog: true})}}> 
                            <AntDesign name="appstore1" size={p2d(30)} style={styles.sort} color="black" />
                            <Text style={styles.font}>分类</Text>
                            <MaterialIcons name="navigate-next" size={p2d(50)} style={styles.next} color="black" />
                        </TouchableOpacity>
                    </View>
                </View>

                <View>
                    <WhoModal
                        content='谁可以看'
                        confirm={this.ensureDialog}
                        cancel={this.cancelDialog}
                        visible={this.state.isShowWho}/>
                    <View>
                        <TouchableOpacity style={styles.box} onPress={() => {this.setState({isShowWho: true})}}> 
                            <Ionicons name="earth" size={p2d(30)} style={styles.sort} color="black" />
                            <Text style={styles.font}>谁可以看</Text>
                            <MaterialIcons name="navigate-next" size={p2d(50)} style={styles.next} color="black" />
                        </TouchableOpacity>
                    </View>
                </View>

                <View>
                    <RemindModal
                        content='选择好友'
                        confirm={this.ensureDialog}
                        cancel={this.cancelDialog}
                        visible={this.state.isShowRemind}/>
                    <View>
                        <TouchableOpacity style={styles.box} onPress={() => {this.setState({isShowRemind: true})}}> 
                            <Text style={styles.aite} color="black" >@</Text>
                            <Text style={styles.font}>提醒</Text>
                            <MaterialIcons name="navigate-next" size={p2d(50)} style={styles.next} color="black" />
                        </TouchableOpacity>
                    </View>
                </View>

    
                <View style={styles.box}> 
                    <Entypo name="eye-with-line" size={p2d(30)} style={styles.sort} color="black" />
                    <Text style={styles.font}>匿名</Text>
                    <Switch 
                        value={this.state.value} onValueChange={(value)=>{
                            this.setState({
                                value:value,
                                changeTxt:value?'switch 打开了':'switch 关闭了'
                            });}}
                        style={styles.switch} />
                </View>
    
                <View style={styles.box}> 
                    <AntDesign name="poweroff" size={p2d(30)} style={styles.sort} color="black" />
                    <Text style={styles.font}>定时发送</Text>
                    <MaterialIcons name="navigate-next" size={p2d(50)} style={styles.next} color="black" />
                </View>
    
    
                <TouchableOpacity style={styles.btn1}>
                    <Text style={styles.submit}>发表</Text>
                </TouchableOpacity>
            </View>
        )
    }
    ensureDialog() {
        this.setState({isShowDialog: false});
        this.setState({isShowWho: false});
        this.setState({isShowRemind: false});
    }
    cancelDialog() {
        this.setState({isShowDialog: false});
        this.setState({isShowWho: false});
        this.setState({isShowRemind: false});
    }

    
}
const styles = StyleSheet.create({
    header:{
        backgroundColor:'#cc66ff',
        height:p2d(120),
        width:'100%',
    },
    black:{
        color:'white',
    },
    fabiao:{
        position:'absolute',
        top:p2d(50),
        left:p2d(300),
        fontSize:p2d(35),
        textAlign:'center',
    },
    more:{
        position:'absolute',
        top:p2d(50),
        right:p2d(20),  
    },
    title:{
        left:p2d(45),
        height:p2d(80),
        fontSize:p2d(30),
        borderBottomWidth:p2d(2),
    },
    context:{
        top:p2d(20),
        left:p2d(50),
        height:p2d(400),
        fontSize:p2d(30),
    },
    photo:{
        height:p2d(130),
        width:p2d(130),
        left:p2d(30),
    },
    smile:{
        left:p2d(30),
        top:p2d(20),
    },
    link:{
        left:p2d(80),
        bottom:p2d(20),
    },
    btn:{

        height:p2d(40),
        width:p2d(40),
        top:p2d(50),
        left:p2d(20),

    },
    location:{
        top:p2d(10),
        backgroundColor:'white',
        height:p2d(40),
        width:p2d(120),
        left:p2d(30),
        borderRadius:p2d(10)
    },
    loca:{
        position:'absolute',

    },
    fontlocation:{
        position:'absolute',
        left:p2d(30),
        fontSize:p2d(26)

    },
    btn1:{
        height:p2d(80),
        position:'relative',
        backgroundColor:'blue',
    },
    submit:{
        color:'white',
        fontSize:p2d(40),
        textAlign:'center',
        lineHeight:p2d(80),
    },
    box:{
        top:p2d(10),
        height:p2d(80),
        borderBottomWidth:p2d(2),
        left:p2d(35),
        borderBottomColor:'rgba(0,0,0,0.5)',
            
    },
    font:{
       fontSize:p2d(30) 
    },
    sort:{
        position:'absolute',
        top:p2d(30)

    },
    font:{
        position:'absolute',
        left:p2d(50),
        fontSize:p2d(30),
        top:p2d(24)
    },
    next:{
        position:'absolute',
        right:p2d(40),
        top:p2d(22)
    },
    aite:{
        position:'absolute',
        top:p2d(20),
        fontSize:p2d(30)
    },
    switch:{
        position:'absolute',
        right:p2d(40),
        top:p2d(15),
    },
})